<template>
  <div>
    <card
      :_Title="$t('deliveryAddress')"
      _More="添加新地址"
      _Src="/home/addAddress"
    ></card>
    <div class="address-box" v-for="(item, index) in list" :key="index">
      <div class="address-header">
        <span>
          {{ item.name }}
          <Tag class="ml_10" v-if="item.isDefault" color="red">{{
            $t("defaultAddress")
          }}</Tag>
          <Tag class="ml_10" v-if="item.alias" color="warning">{{
            item.alias
          }}</Tag>
        </span>
        <div class="address-action">
          <span @click="edit(item.id)"><Icon type="edit"></Icon>修改</span>
          <span @click="del(item.id)"
            ><Icon type="trash-a"></Icon>{{ $t("delete") }}</span
          >
        </div>
      </div>
      <div class="address-content">
        <p>
          <span class="address-content-title"> 收 货 人 :</span> {{ item.name }}
        </p>
        <p>
          <span class="address-content-title">收货地址:</span
          >{{ item.consigneeAddressPath | unitAddress }}
        </p>
        <p>
          <span class="address-content-title">unit number:</span>
          {{ item.detail }}
        </p>
        <p>
          <span class="address-content-title">国家:</span>
          {{ item.addressCountry || getAddressPart(item.consigneeAddressPath, 0) }}
        </p>
        <p>
          <span class="address-content-title">省份:</span>
          {{ item.addressProvince || getAddressPart(item.consigneeAddressPath, 1) }}
        </p>
        <p>
          <span class="address-content-title">城市:</span>
          {{ item.addressCity || getAddressPart(item.consigneeAddressPath, 2) }}
        </p>
        <p>
          <span class="address-content-title">{{ $t("phoneNumber") }}:</span>
          {{ item.mobile }}
        </p>
        <p>
          <span class="address-content-title">邮箱:</span>
          {{ item.adderEmail }}
        </p>
        <p>
          <span class="address-content-title">邮编:</span>
          {{ item.addressNo }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import card from "@/components/card";
import { memberAddress, delMemberAddress } from "@/api/address.js";

export default {
  name: "MyAddress",

  data() {
    return {
      list: [], // 地址列表
    };
  },
  methods: {
    // 获取地址部分（按逗号分隔）
    getAddressPart(addressPath, index) {
      if (!addressPath) return '';
      const parts = addressPath.split(',');
      return parts[index] ? parts[index].trim() : '';
    },
    edit(id) {
      // 编辑地址
      this.$router.push({ path: "/home/addAddress", query: { id: id } });
    },
    del(id) {
      // 删除地址
      this.$Modal.confirm({
        title: "提示",
        content: "你确定删除这个收货地址",
        onOk: () => {
          delMemberAddress(id).then((res) => {
            if (res.success) {
              this.$Message.success(this.$t("delete") + this.$t('succeed'));
              this.getAddrList();
            }
          });
        },
        onCancel: () => {
          this.$Message.info(this.$t("cancel") + this.$t("delete"));
        },
      });
    },
    getAddrList() {
      // 获取地址列表
      memberAddress().then((res) => {
        console.log(res);
        if (res.success) {
          this.list = res.result.records;
        }
      });
    },
  },
  mounted() {
    this.getAddrList();
  },
};
</script>

<style scoped lang="scss">
.address-box {
  padding: 15px;
  margin: 15px;

  border-bottom: 1px solid $border_color;
}

.address-header {
  cursor: pointer;
  height: 35px;
  display: flex;
  justify-content: space-between;
  @include title_color($light_title_color);
  font-size: 18px;
}

.address-content {
  cursor: pointer;
  font-size: 14px;

  > p {
    padding: 12px 0;
  }
}

.address-content-title {
}

.address-action span {
  margin-left: 15px;
  font-size: 14px;
  color: $theme_color;
  cursor: pointer;
}

#map-container {
  width: 500px;
  height: 300px;
}
</style>
